<template>
    <div class="total">
        <img :src="img" class="logo">
        <div class="s1">租好房</div>
        <div class="s2">
            <!-- 下拉菜单 -->
            <el-dropdown @command="handleCommand" trigger="click">
                <!-- 下拉菜单的触发器，这里使用了一个按钮 -->
                <el-button type="danger">
                    用户 <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <!-- 下拉菜单内容 -->
                <el-dropdown-menu slot="dropdown">
                    <!-- 修改密码选项 -->
                    <el-dropdown-item @click.native="handleCommand('ChangePassword')" icon="el-icon-edit">
                        修改密码
                    </el-dropdown-item>
                    <!-- 退出登录选项 -->
                    <el-dropdown-item @click.native="handleCommand('LoginOut')" icon="el-icon-refresh-left">
                        退出登录
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        img: '../assets/logo.png'
    },
    methods: {
        handleCommand(command) {
            switch (command) {
                case 'ChangePassword':
                    this.dialogVisible = true;
                    break;
                case 'LoginOut':
                    this.$router.push({ name: "login" });
                    break;
                default:
                    console.log('未知命令');
            }
        },
        submitForm(ruleForm) {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    axios.get(`/user/changePassword/${ruleForm.password}/${ruleForm.password1}`, {
                        headers: {
                            'Authorization': `Bearer ${token}`
                        },
                    }).then(res => {
                        if (res.data.msg == "success") {
                            this.$message({
                                message: "修改成功",
                                type: "success"
                            })
                            this.ruleForm.password = '';
                            this.ruleForm.password1 = '';
                            this.dialogVisible = false;
                        } else {
                            this.$message({
                                message: "密码错误",
                                type: "error"
                            })
                        }
                    })
                } else {
                    this.$message({
                        message: "请输入密码",
                        type: "error"
                    })
                    return false;
                }
            });
        },

    }
}
</script>

<style scoped>
.logo {
    float: left;
    width: 30px;
    height: 30px;
    margin-top: 15px;
    margin-bottom: 10px;
    margin-right: 15px;
}

.s1 {
    font-size: 20px;
    float: left;
    margin: auto;
    color: #FFFFFF;
}

.s2 {
    float: right;
}
</style>